<template>
    <div class='my-header'>
      <h3>ToDoList</h3>
      <input :value="value" @input='skip($event)' @keydown.enter="add" type="text" placeholder="请输入内容">
    </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: ["value"],
  mounted() {},
  methods: {
    // 实现双向绑定
    skip(e) {
      this.$emit("input", e.target.value);
    },
    // 子传父传回事件
    add() {
      this.$emit("addText");
    }
  },
  components: {}
};
</script>

<style lang='scss' scoped>
.my-header {
  width: 100%;
  height: 50px;
  background-color: #000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 300px;
  h3 {
    color: #fff;
  }
  input {
    width: 300px;
    height: 62%;
    padding-left: 20px;
    border-radius: 8px;
  }
}
</style>
